<template>
  <div class="loginbody">
    <div class="logo">
      <div class="left_logo">
        <img src="@/assets/education-logo.png" alt="" />
      </div>
      <div class="right_logo">
        <span class="chinese">学 科 绩 效 评 价 系 统</span><br />
        <span class="english">Discipline Performance Appraisal System</span>
      </div>
    </div>
    <div class="logindata">
      <div class="logintext">
        <h2>用户登录</h2>
      </div>
      <div class="formdata">
        <el-form ref="user" :model="user" :rules="rules" class="login">
          <el-form-item prop="userId">
            <el-input v-model="user.userId" placeholder="用户名" prefix-icon="el-icon-user-solid"
              class="formItem"></el-input>
          </el-form-item>
          <el-form-item prop="userPassword">
            <el-input v-model="user.userPassword" type="password" show-password prefix-icon="el-icon-lock"
              placeholder="密码" class="formItem"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" native-type="submit" @click="login('user')" class="formItem" v-loading="loading"
              element-loading-text="正在登录" element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.9)">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="bottom_message">
      <p>河南郑州郑东新区文苑西路15号&nbsp;&nbsp;&nbsp;邮政编码：450046</p>
      <p>郑州航空工业管理学院1999-2023 版权所有</p>
      <p>建议浏览器使用 IE10+、Firfox、Chrome</p>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "login",
  data() {
    return {
      user: {},
      loading: false,
      rules: {
        userId: [{ message: "用户名称不得为空！", required: true }],
        userPassword: [{ message: "密码不得为空！", required: true }],
      },
    };
  },
  methods: {
    ...mapActions("myInfo", ["login_"]),
    login(user) {
      this.$refs[user].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.login_(this.user).then((res) => {
            if (res.code === 1) {
              this.$router.push("/home");
            } else {
              this.loading = false
            }
          });
        }
      });
    },
  },
}
</script>

<style lang="less" scoped>
.out_box {
  width: 100%;
  height: 100%;
}

.loginbody {
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background-image: url("@/assets/education-bg.png");
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  line-height: 100%;

  .logo {
    height: 100px;
    padding: 20px 5%;

    .left_logo {
      float: left;
      width: 300px;
      height: 80px;

      img {
        width: 100%;
      }
    }

    .right_logo {
      margin: 27px 0 0 60px;
      color: #09559d;
      float: left;

      .chinese {
        font-size: 20px;
      }
    }
  }

  .logindata {
    overflow: hidden;
    border-radius: 15px;
    background: rgba(124, 119, 119, 0.912);
    width: 350px;
    height: 315px;
    transform: translate(-50%);
    margin-left: 20%;
    margin-top: 60px;

    .logintext {
      margin: 20px 0 10px 0;
      text-align: center;
      font-size: 20px;
      color: white;
      line-height: 30px;
    }
  }

  .bottom_message {
    width: 100%;
    height: 15%;
    background-color: rgb(255, 255, 255);
    position: fixed;
    bottom: 0%;
    text-align: center;
  }
}

.formItem {
  width: 275px;
  margin-left: 37px;
}
</style>